<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-06-20 08:57:17
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-06-20 17:02:39
 * @FilePath: \my\common-component-packaging\src\views\HomeView.vue
 * @Description: 
 * 
-->
<template>
  <div>
    <element-plus-components ref="formModelRef" :formFields="formFields" :rules="rules" />
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import ElementPlusComponents from './components/ElementPlusComponents.vue'
import { regionData } from 'element-china-area-data'
//组件ref
const formModelRef = ref(null)
//form表单配置
const formFields = reactive([
  { type: 'input', span: 12, prop: 'name', label: '姓名' },
  { type: 'number', span: 12, prop: 'number', label: '数量', size: 'large', defaultValue: 0 },
  {
    type: 'checkbox',
    span: 12,
    prop: 'abc',
    label: '包含',
    defaultValue: [],
    group: [
      { label: 'a', value: 0, disabled: false },
      { label: 'b', value: 1 },
      { label: 'c', value: 2, disabled: true }
    ]
  },
  {
    type: 'radio',
    span: 12,
    prop: 'sex',
    label: '性别',
    defaultValue: 0,
    group: [
      { label: '男', value: 0, disabled: false },
      { label: '女', value: 2, disabled: false }
    ]
  },
  {
    type: 'select',
    span: 12,
    prop: 'age',
    label: '年龄',
    defaultValue: 0,
    options: [
      { label: '20以下', value: 0, disabled: false },
      { label: '21以上', value: 2, disabled: true }
    ]
  },
  {
    type: 'switch',
    span: 12,
    prop: 'isOpen',
    label: '是否开启',
    active: '开启',
    inactive: '关闭',
    defaultValue: true
  },
  { type: 'datePicker', span: 12, prop: 'year', label: '出生年分', dataType: 'year', format: '' },
  { type: 'textarea', span: 12, prop: 'desc', label: '描述' },
  {
    type: 'upload',
    span: 12,
    prop: 'pic',
    label: '头像',
    defaultValue: [
      {
        name: 'food.jpeg',
        url:
          'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }
    ]
  },
  { type: 'cascader', span:12, prop: 'addre' , label:'地址' ,options:regionData}
])
//校验规则配置
const rules = reactive({
  name: [
    {
      required: true,
      message: '姓名不能为空',
      trigger: 'blur'
    }
  ],
  number: [
    {
      required: true,
      trigger: 'blur'
    }
  ],
  pic: [{ required: true, message: '图片不能为空', trigger: 'blur' }]
})

//提交
const submit = async () => {
  const res = await formModelRef.value.validateForm()
  if (res) {
    console.log(formModelRef.value.form)
  }
}
</script>

<style lang="scss" scoped></style>
